<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>月老线 - 缘分的红线，由你牵起</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <div id="app">
        <!-- 欢迎页 - 月老形象突出 -->
        <div class="page welcome-page" id="welcome-page">
            <div class="yuelao-scene">
                <div class="yuelao-figure">
                    <img src="images/yuelao-character.png" alt="月老形象" class="yuelao-image">
                    <div class="speech-bubble">
                        <p>老夫掌管天下姻缘</p>
                        <p>一元一缘，助你牵手有情人</p>
                    </div>
                </div>
                <div class="red-threads">
                    <div class="thread thread-1"></div>
                    <div class="thread thread-2"></div>
                    <div class="thread thread-3"></div>
                </div>
                <div class="envelope-floating envelope-1">
                    <img src="images/profile1.jpg" alt="缘分" class="envelope-img">
                    <div class="envelope-price">¥1</div>
                </div>
                <div class="envelope-floating envelope-2">
                    <img src="images/profile2.jpg" alt="缘分" class="envelope-img">
                    <div class="envelope-price">¥1</div>
                </div>
                <div class="envelope-floating envelope-3">
                    <img src="images/profile3.jpg" alt="缘分" class="envelope-img">
                    <div class="envelope-price">¥1</div>
                </div>
            </div>
            
            <div class="welcome-footer">
                <h1 class="app-title">月老线</h1>
                <p class="app-subtitle">一元一缘，遇见心动的TA</p>
                <div class="swipe-indicator">
                    <div class="swipe-text">向上滑动，寻找你的缘分</div>
                    <div class="swipe-arrow">
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主页 - 月老主题设计 -->
        <div class="page main-page" id="main-page" style="display: none;">
            <div class="yuelao-header">
                <div class="yuelao-avatar">
                    <img src="images/yuelao-avatar.png" alt="月老头像">
                </div>
                <div class="yuelao-message">
                    <p class="message-text">我已为你准备了这些良缘</p>
                    <div class="message-indicator"></div>
                </div>
                <div class="user-balance">缘分币: 10</div>
            </div>
            
            <div class="temple-scene">
                <div class="temple-background"></div>
                <div class="envelope-shelf">
                    <h2 class="shelf-title">今日良缘</h2>
                    <div class="envelopes-container">
                        <div class="envelope" onclick="showPage('envelope-preview-page')">
                            <div class="envelope-front">
                                <img src="images/profile1.jpg" alt="缘分">
                                <div class="envelope-tag">
                                    <span class="tag-name">小红</span>
                                    <span class="tag-age">25岁</span>
                                </div>
                            </div>
                            <div class="envelope-price-tag">¥1</div>
                        </div>
                        <div class="envelope" onclick="showPage('envelope-preview-page')">
                            <div class="envelope-front">
                                <img src="images/profile2.jpg" alt="缘分">
                                <div class="envelope-tag">
                                    <span class="tag-name">小明</span>
                                    <span class="tag-age">27岁</span>
                                </div>
                            </div>
                            <div class="envelope-price-tag">¥1</div>
                        </div>
                        <div class="envelope" onclick="showPage('envelope-preview-page')">
                            <div class="envelope-front">
                                <img src="images/profile3.jpg" alt="缘分">
                                <div class="envelope-tag">
                                    <span class="tag-name">小花</span>
                                    <span class="tag-age">24岁</span>
                                </div>
                            </div>
                            <div class="envelope-price-tag">¥1</div>
                        </div>
                        <div class="envelope" onclick="showPage('envelope-preview-page')">
                            <div class="envelope-front">
                                <img src="images/profile4.jpg" alt="缘分">
                                <div class="envelope-tag">
                                    <span class="tag-name">小强</span>
                                    <span class="tag-age">26岁</span>
                                </div>
                            </div>
                            <div class="envelope-price-tag">¥1</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="action-buttons">
                <div class="action-button create-button" onclick="showPage('create-envelope-page')">
                    <div class="button-icon">✍</div>
                    <div class="button-text">写下我的缘分</div>
                </div>
                <div class="action-button browse-button" onclick="showPage('browse-page')">
                    <div class="button-icon">🔍</div>
                    <div class="button-text">浏览更多良缘</div>
                </div>
                <div class="action-button my-button" onclick="showPage('my-envelopes-page')">
                    <div class="button-icon">📜</div>
                    <div class="button-text">我的缘分</div>
                </div>
            </div>
            
            <div class="yuelao-quote-footer">
                <p>"千里姻缘一线牵，有缘千里来相见"</p>
            </div>
        </div>

        <!-- 首页 -->
        <div class="page index-page" id="index-page" style="display: none;">
            <div class="container">
                <!-- 顶部导航栏 -->
                <div class="nav-bar">
                    <img class="avatar" src="images/default-avatar.png" alt="用户头像">
                    <div class="yuelao-quote">月老为你牵线</div>
                    <div class="balance">缘分币: 10</div>
                </div>
                
                <!-- 红线装饰 -->
                <div class="red-thread-decoration"></div>
                
                <!-- 主要功能区 -->
                <div class="main-area">
                    <div class="feature-card" onclick="showPage('browse-page')">
                        <img src="images/envelope-buy.png" alt="购买信封">
                        <div class="card-title">购买信封</div>
                        <div class="card-desc">发现心动的TA</div>
                    </div>
                    
                    <div class="feature-card" onclick="showPage('create-envelope-page')">
                        <img src="images/envelope-create.png" alt="创建信封">
                        <div class="card-title">创建信封</div>
                        <div class="card-desc">等待被发现</div>
                    </div>
                    
                    <div class="feature-card" onclick="showPage('my-envelopes-page')">
                        <img src="images/my-envelopes.png" alt="我的信封">
                        <div class="card-title">我的信封</div>
                        <div class="card-desc">管理我的缘分</div>
                    </div>
                </div>
                
                <!-- 底部推荐区 -->
                <div class="recommendation">
                    <div class="section-title">
                        <span class="title-icon">❤</span>
                        缘分推荐
                        <span class="title-icon">❤</span>
                    </div>
                    <div class="envelope-scroll">
                        <div class="envelope-item" onclick="showPage('envelope-preview-page')">
                            <img class="envelope-preview" src="images/profile1.jpg" alt="信封预览">
                            <div class="envelope-price">¥1</div>
                        </div>
                        <div class="envelope-item" onclick="showPage('envelope-preview-page')">
                            <img class="envelope-preview" src="images/profile2.jpg" alt="信封预览">
                            <div class="envelope-price">¥1</div>
                        </div>
                        <div class="envelope-item" onclick="showPage('envelope-preview-page')">
                            <img class="envelope-preview" src="images/profile3.jpg" alt="信封预览">
                            <div class="envelope-price">¥1</div>
                        </div>
                        <div class="envelope-item" onclick="showPage('envelope-preview-page')">
                            <img class="envelope-preview" src="images/profile4.jpg" alt="信封预览">
                            <div class="envelope-price">¥1</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部导航 -->
            <div class="tab-bar">
                <div class="tab-item active">
                    <img src="images/home.png" alt="首页">
                    <div>首页</div>
                </div>
                <div class="tab-item" onclick="showPage('browse-page')">
                    <img src="images/browse.png" alt="浏览">
                    <div>浏览</div>
                </div>
                <div class="tab-item" onclick="showPage('my-envelopes-page')">
                    <img src="images/my.png" alt="我的">
                    <div>我的</div>
                </div>
            </div>
        </div>

        <!-- 浏览页面 -->
        <div class="page browse-page" id="browse-page" style="display: none;">
            <div class="browse-container">
                <div class="filter-bar">
                    <div class="filter active" data-filter="all">全部</div>
                    <div class="filter" data-filter="male">男生</div>
                    <div class="filter" data-filter="female">女生</div>
                    <div class="filter" data-filter="new">最新</div>
                </div>
                
                <div class="envelopes-grid">
                    <div class="envelope-card" onclick="showPage('envelope-preview-page')">
                        <img class="envelope-image" src="images/profile1.jpg" alt="信封图片">
                        <div class="envelope-info">
                            <div class="envelope-name">小红</div>
                            <div class="envelope-age">25岁</div>
                            <div class="envelope-price">¥1</div>
                        </div>
                    </div>
                    <div class="envelope-card" onclick="showPage('envelope-preview-page')">
                        <img class="envelope-image" src="images/profile2.jpg" alt="信封图片">
                        <div class="envelope-info">
                            <div class="envelope-name">小明</div>
                            <div class="envelope-age">27岁</div>
                            <div class="envelope-price">¥1</div>
                        </div>
                    </div>
                    <div class="envelope-card" onclick="showPage('envelope-preview-page')">
                        <img class="envelope-image" src="images/profile3.jpg" alt="信封图片">
                        <div class="envelope-info">
                            <div class="envelope-name">小花</div>
                            <div class="envelope-age">24岁</div>
                            <div class="envelope-price">¥1</div>
                        </div>
                    </div>
                    <div class="envelope-card" onclick="showPage('envelope-preview-page')">
                        <img class="envelope-image" src="images/profile4.jpg" alt="信封图片">
                        <div class="envelope-info">
                            <div class="envelope-name">小强</div>
                            <div class="envelope-age">26岁</div>
                            <div class="envelope-price">¥1</div>
                        </div>
                    </div>
                    <div class="envelope-card" onclick="showPage('envelope-preview-page')">
                        <img class="envelope-image" src="images/profile5.jpg" alt="信封图片">
                        <div class="envelope-info">
                            <div class="envelope-name">小丽</div>
                            <div class="envelope-age">23岁</div>
                            <div class="envelope-price">¥1</div>
                        </div>
                    </div>
                    <div class="envelope-card" onclick="showPage('envelope-preview-page')">
                        <img class="envelope-image" src="images/profile6.jpg" alt="信封图片">
                        <div class="envelope-info">
                            <div class="envelope-name">小刚</div>
                            <div class="envelope-age">28岁</div>
                            <div class="envelope-price">¥1</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部导航 -->
            <div class="tab-bar">
                <div class="tab-item" onclick="showPage('index-page')">
                    <img src="images/home.png" alt="首页">
                    <div>首页</div>
                </div>
                <div class="tab-item active">
                    <img src="images/browse.png" alt="浏览">
                    <div>浏览</div>
                </div>
                <div class="tab-item" onclick="showPage('my-envelopes-page')">
                    <img src="images/my.png" alt="我的">
                    <div>我的</div>
                </div>
            </div>
        </div>

        <!-- 信封预览页 -->
        <div class="page envelope-preview-page" id="envelope-preview-page" style="display: none;">
            <div class="preview-container">
                <div class="page-header">
                    <div class="back-btn" onclick="showPage('browse-page')">返回</div>
                    <div class="page-title">信封预览</div>
                </div>
                
                <div class="envelope-preview">
                    <img class="envelope-image" src="images/profile1.jpg" alt="信封图片">
                    <div class="envelope-basic-info">
                        <div class="info-row">
                            <div class="info-label">昵称:</div>
                            <div class="info-value">小红</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">年龄:</div>
                            <div class="info-value">25岁</div>
                        </div>
                        <div class="info-row">
                            <div class="info-label">地区:</div>
                            <div class="info-value">北京市 海淀区</div>
                        </div>
                    </div>
                    
                    <div class="envelope-description">
                        <p>喜欢旅行和摄影，性格开朗，希望能找到志同道合的伴侣一起探索世界...</p>
                    </div>
                    
                    <div class="blur-overlay">
                        <div class="blur-text">更多内容需要打开信封查看</div>
                    </div>
                </div>
                
                <button class="buy-btn" onclick="showPage('envelope-detail-page')">花费1元打开信封</button>
                <div class="hint-text">打开后可查看联系方式和完整信息</div>
            </div>
        </div>

        <!-- 信封详情页 -->
        <div class="page envelope-detail-page" id="envelope-detail-page" style="display: none;">
            <div class="detail-container">
                <div class="page-header">
                    <div class="back-btn" onclick="showPage('browse-page')">返回</div>
                    <div class="page-title">信封详情</div>
                </div>
                
                <div class="photo-swiper">
                    <img src="images/profile1.jpg" alt="照片">
                    <div class="swiper-dots">
                        <span class="dot active"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                    </div>
                </div>
                
                <div class="envelope-info">
                    <div class="info-header">
                        <div class="name-age">
                            <span class="name">小红</span>
                            <span class="age">25岁</span>
                        </div>
                        <div class="location">北京市 海淀区</div>
                    </div>
                    
                    <div class="info-section">
                        <div class="section-title">个人介绍</div>
                        <div class="section-content">
                            喜欢旅行和摄影，性格开朗，希望能找到志同道合的伴侣一起探索世界。平时喜欢看书、听音乐，偶尔也会做做手工。工作是一名设计师，对生活充满热情。希望能遇到一个真诚、有责任感的人，一起经历生活的点点滴滴。
                        </div>
                    </div>
                    
                    <div class="info-section contact-section">
                        <div class="section-title">联系方式</div>
                        <div class="section-content">微信号: xiaohong123</div>
                        <button class="copy-btn">复制</button>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="report-btn">举报</button>
                        <button class="favorite-btn">收藏</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 创建信封页面 -->
        <div class="page create-envelope-page" id="create-envelope-page" style="display: none;">
            <div class="create-container">
                <div class="page-header">
                    <div class="back-btn" onclick="showPage('index-page')">返回</div>
                    <div class="page-title">创建信封</div>
                </div>
                
                <div class="form-title">创建你的信封</div>
                
                <form id="envelope-form">
                    <div class="form-group">
                        <div class="form-label">上传照片 (最多4张)</div>
                        <div class="photo-upload-area">
                            <div class="add-photo">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="form-label">基本信息</div>
                        <input name="nickname" placeholder="昵称">
                        <input name="age" type="number" placeholder="年龄">
                        <div class="picker">
                            地区: 请选择
                        </div>
                        <div class="radio-group">
                            <label><input type="radio" name="gender" value="male">男生</label>
                            <label><input type="radio" name="gender" value="female">女生</label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="form-label">个人介绍</div>
                        <textarea name="description" placeholder="介绍一下自己吧..."></textarea>
                    </div>
                    
                    <div class="form-group">
                        <div class="form-label">联系方式</div>
                        <input name="contact" placeholder="微信号/手机号">
                        <div class="contact-hint">*仅购买者可见</div>
                    </div>
                    
                    <button type="button" class="submit-btn" onclick="showPage('index-page')">创建信封</button>
                </form>
            </div>
        </div>

        <!-- 我的信封页面 -->
        <div class="page my-envelopes-page" id="my-envelopes-page" style="display: none;">
            <div class="my-envelopes-container">
                <div class="tab-bar my-tab-bar">
                    <div class="tab active" data-tab="created">我创建的</div>
                    <div class="tab" data-tab="purchased">我购买的</div>
                </div>
                
                <div class="envelope-list created-list">
                    <div class="envelope-item" onclick="showPage('envelope-detail-page')">
                        <img class="envelope-image" src="images/profile7.jpg" alt="信封图片">
                        <div class="envelope-info">
                            <div class="envelope-title">我的信封</div>
                            <div class="envelope-stats">
                                <span>浏览: 56</span>
                                <span>购买: 3</span>
                            </div>
                            <div class="envelope-date">2023-05-15</div>
                        </div>
                    </div>
                </div>
                
                <div class="envelope-list purchased-list" style="display: none;">
                    <div class="envelope-item" onclick="showPage('envelope-detail-page')">
                        <img class="envelope-image" src="images/profile1.jpg" alt="信封图片">
                        <div class="envelope-info">
                            <div class="envelope-title">小红</div>
                            <div class="envelope-contact">联系方式: xiaohong123</div>
                            <div class="envelope-date">购买于: 2023-05-10</div>
                        </div>
                    </div>
                    <div class="envelope-item" onclick="showPage('envelope-detail-page')">
                        <img class="envelope-image" src="images/profile3.jpg" alt="信封图片">
                        <div class="envelope-info">
                            <div class="envelope-title">小花</div>
                            <div class="envelope-contact">联系方式: xiaohua456</div>
                            <div class="envelope-date">购买于: 2023-05-08</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部导航 -->
            <div class="tab-bar">
                <div class="tab-item" onclick="showPage('index-page')">
                    <img src="images/home.png" alt="首页">
                    <div>首页</div>
                </div>
                <div class="tab-item" onclick="showPage('browse-page')">
                    <img src="images/browse.png" alt="浏览">
                    <div>浏览</div>
                </div>
                <div class="tab-item active">
                    <img src="images/my.png" alt="我的">
                    <div>我的</div>
                </div>
            </div>
        </div>

        <!-- 充值页面 -->
        <div class="page recharge-page" id="recharge-page" style="display: none;">
            <div class="recharge-container">
                <div class="page-header">
                    <div class="back-btn" onclick="showPage('my-envelopes-page')">返回</div>
                    <div class="page-title">充值</div>
                </div>
                
                <div class="balance-display">
                    <div class="balance-label">当前余额</div>
                    <div class="balance-amount">10元</div>
                </div>
                
                <div class="recharge-options">
                    <div class="option-title">选择充值金额</div>
                    <div class="options-grid">
                        <div class="option-item selected">
                            <div class="amount">10元</div>
                            <div class="description">可购买10个信封</div>
                        </div>
                        <div class="option-item">
                            <div class="amount">30元</div>
                            <div class="description">可购买30个信封</div>
                        </div>
                        <div class="option-item">
                            <div class="amount">50元</div>
                            <div class="description">可购买50个信封</div>
                        </div>
                        <div class="option-item">
                            <div class="amount">100元</div>
                            <div class="description">可购买100个信封</div>
                        </div>
                    </div>
                    
                    <div class="custom-amount">
                        <div class="custom-label">自定义金额</div>
                        <input type="number" placeholder="请输入充值金额">
                    </div>
                </div>
                
                <button class="recharge-btn" onclick="showPage('my-envelopes-page')">确认充值</button>
                
                <div class="recharge-tips">
                    <div class="tip-title">充值说明</div>
                    <div class="tip-item">1. 1元 = 1个信封</div>
                    <div class="tip-item">2. 充值金额仅用于平台内购买信封</div>
                    <div class="tip-item">3. 充值金额不支持提现或退款</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const welcomePage = document.getElementById('welcome-page');
            let startY = 0;
            let endY = 0;
            const minSwipeDistance = 100;
            
            welcomePage.addEventListener('touchstart', function(e) {
                startY = e.touches[0].clientY;
            }, false);
            
            welcomePage.addEventListener('touchend', function(e) {
                endY = e.changedTouches[0].clientY;
                handleSwipe();
            }, false);
            
            function handleSwipe() {
                const swipeDistance = startY - endY;
                if (swipeDistance > minSwipeDistance) {
                    showPage('main-page');
                }
            }
            
            welcomePage.addEventListener('wheel', function(e) {
                if (e.deltaY > 0) {
                    showPage('main-page');
                }
            });
            
            window.showPage = function(pageId) {
                document.querySelectorAll('.page').forEach(page => {
                    page.style.display = 'none';
                });
                
                document.getElementById(pageId).style.display = 'block';
                
                // 添加页面切换动画
                if (pageId === 'main-page') {
                    animateEnvelopes();
                }
            }
            
            function animateEnvelopes() {
                const envelopes = document.querySelectorAll('.envelope');
                envelopes.forEach((envelope, index) => {
                    envelope.style.animationDelay = `${index * 0.2}s`;
                    envelope.classList.add('animate-in');
                });
            }
        });
    </script>
</body>
</html> 